<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/jquery.mobile-1.4.2.min.css">
<link rel="stylesheet" href="css/jw-jqm-cal.css" />
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/jquery.mobile-1.4.2.min.js"></script>
<script src="js/database.js"></script>
<script src="js/logic.js"></script>
<script type="text/javascript" src="js/jw-jqm-cal.js"></script>
<script type="text/javascript">
</script>
<script id="panel-init">
	$(function() {
		$( "body>[data-role='panel']" ).panel().trigger('create');
	});	
$(document).on('pagebeforeshow', '#CalendarPage', function loadPageData(){ 
    var cases = setCasesInAscendingOrder(),i;
	var myEvents = [];
	for(i=0;i<cases.length;i++){
	eventObj = JSON.parse('{"summary": "","begin": "","end": ""}');
	eventObj.summary = cases[i].plaintiff+' vs '+cases[i].respondent;
	eventObj.begin = new Date(cases[i].date.getFullYear(),cases[i].date.getMonth(),cases[i].date.getDate());
	eventObj.end = new Date(cases[i].date.getFullYear(),cases[i].date.getMonth(),cases[i].date.getDate()+1);
	myEvents.push(eventObj);
	}
    $("#calendar").jqmCalendar({
        events: myEvents,
                 months: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
        days: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
        startOfWeek: 0
        
    });
	
});
	</script>
</head>
<body id="bodyId">
<!----- panel -->
<div data-role="panel" id="mypanel" data-position="left" data-display="overlay" data-theme="b" data-position-fixed="true">
</br>
</br>
</br>
<ul  data-role="listview" data-theme="a" data-icon="false" >
<li><a id="addDatePanel">Add Date</a></li>
<li><a id="addCasePanel">Add Case</a></li>
<li><a id="activeCases">View All Cases</a></li>
<li><a id="upcomingCases">Upcoming Dates</a></li>
<li><a id="calendarPanel" href="#CalendarPage" data-transition="slide">Calendar</a></li>
</ul>
</div>



<!--PAGE 0 -->
<div data-role="page" id="upcomingCasesPage">

</div>

<!--PAGE 1 -->
<div data-role="page" id="addCasePage">
  <div data-role="header" data-position="fixed">
  <a href="#mypanel" class="ui-btn ui-corner-all ui-icon-bars ui-btn-icon-notext">Bar</a>
    <h1> Add Case</h1>
	 <a href="#" class="ui-btn ui-corner-all ui-icon-search ui-btn-icon-notext" id="searchButton">Search Icon</a>
  </div>
  <div data-role="main" class="ui-content">
   	</br> 
	<input type="text" id="plaintiff" placeholder="Plaintiff">
	</br>
	<input type="text" id="respondent" placeholder="Respondent">
	</br>
	<input type="text" id="caseRefNo" placeholder="Case Ref no.">
	</br> 
	<input type="text" id="caseNote" placeholder="Case Notes">
	</div>
 <div data-role="footer" data-position="fixed" style="text-align:center;">
    <a id="addCase" data-icon="check" data-theme="b">Save</a>
  </div>
</div> 



<!--PAGE 2 -->
<div data-role="page" id="addDatePage">
  <div data-role="header" data-position="fixed">
  <a href="#mypanel" class="ui-btn ui-corner-all ui-icon-bars ui-btn-icon-notext"></a>
    <h1> Add Date</h1>
	 <a href="#" class="ui-btn ui-corner-all ui-icon-search ui-btn-icon-notext" id="searchButton">Search Icon</a>
  </div>

 <div data-role="main" class="ui-content">
	
    <input type="date" id="date" placeholder="Date">
	<input type="text" id="dateNote" placeholder="Date note">
	
  </div>

  <div data-role="footer" data-position="fixed" style="text-align:center;">

  
   <a id="addDate" data-icon="check" data-theme="b" >Save</a>
   
  </div>
</div> 

<!--PAGE 3 -->

<div data-role="page" id="allCasesPage">
<!--	
-->  
</div>
  
  
 <!--PAGE 4 -->
  
  <div data-role="page" id="viewCasePage">
  
  </div>
   <!--PAGE 5 -->
  <div data-role="page" id="updateCasePage">
   <div data-role="header" data-position="fixed">
  <a href="#mypanel" class="ui-btn ui-corner-all ui-icon-bars ui-btn-icon-notext"></a>
    <h1> Add Case</h1>
	 <a href="#" class="ui-btn ui-corner-all ui-icon-search ui-btn-icon-notext" id="searchButton">Search Icon</a>
  </div>
  <div data-role="main" class="ui-content">
   	</br>
	
	Plaintiff
	</br>
	<input type="text" id="plaintiffUpdate">
	</br>
	Respondent
	<input type="text" id="respondentUpdate" >
	</br>
	Case Ref no.
	</br>
	<input type="text" id="caseRefNoUpdate">
	</br> 
	Case Note
	</br>
	<input type="text" id="caseNoteUpdate">
 </div>
<div data-role="footer" data-position="fixed" style="text-align:center;">
   <a  id="updateCaseButton" data-icon="check" data-theme="b">Save</a>
  </div>
</div> 

<!--PAGE 6 -->
<div data-role="page" id="datePage">
 <div data-role="header" data-position="fixed">
  <a href="#mypanel" class="ui-btn ui-corner-all ui-icon-bars ui-btn-icon-notext"></a>
    <h1> Add Case</h1>
	 <a href="#" class="ui-btn ui-corner-all ui-icon-search ui-btn-icon-notext" id="searchButton">Search Icon</a>
  </div>
  <div data-role="main" id="viewDateData" class="ui-content">
  </div>
  
  <div data-role="footer" data-position="fixed" style="text-align:center;">
   <a id="loadUpdateDatePage" data-icon="edit" data-theme="b">Edit</a>
   <a  data-theme="b" data-icon="delete">Delete</a>
  </div>
</div>

<!--PAGE 7 -->
<div data-role="page" id="updateDatePage">
   <div data-role="header" data-position="fixed">
  <a href="#mypanel" class="ui-btn ui-corner-all ui-icon-bars ui-btn-icon-notext"></a>
    <h1>Edit Date</h1>
	 <a href="#" class="ui-btn ui-corner-all ui-icon-search ui-btn-icon-notext" id="searchButton">Search Icon</a>
  </div>

 <div data-role="main" class="ui-content">
	Date
	</br>
    <input type="date" id="updateDate" placeholder="Date">
	Date Note
	</br>
	<input type="text" id="updateDateNote" placeholder="Date note">
  </div>
  <div data-role="footer" data-position="fixed" style="text-align:center;">
   <a  id="updateDateButton" data-icon="check" data-theme="b">Save</a>
   <a  data-theme="b" data-icon="delete" id="deleteDateButton" >Delete</a>
  </div>

</div>
<!--PAGE 8 -->
<div data-role="page" id="chooseCasePage">
<!--	
-->  
</div>
<div data-role="page" id="CalendarPage">
       <div data-theme="a" data-role="header">
          <a href="#mypanel" class="ui-btn ui-corner-all ui-icon-bars ui-btn-icon-notext">Bar</a>
			<h1>Calendar</h1>
			<a href="#" class="ui-btn ui-corner-all ui-icon-search ui-btn-icon-notext" id="searchButton">Search Icon</a>
		</div>
            
            <div data-role="content">
                <div id="calendar"></div>
            </div>
</div>    

<div data-role="page" id="searchPage">
<!--	
-->  
</div>
    
</body>
</html>
